import React, {memo, useEffect, useState} from 'react';
import {useLocalStorage} from "./hooks";

const App = memo(() => {
  const [inputValue, setInputValue] = useState('');

  //使用 hook 抽取重复逻辑代码, 提高代码简洁性和可维护性
  //在对数组解构时，名字可以随意命名，根据顺序来就行
  const [token, setToken] = useLocalStorage('token');
  const [avatarUrl, setAvatarUrl] = useLocalStorage('avatarUrl');

  // //重复逻辑代码！！！
  // const [token, setToken] = useState(localStorage.getItem('token'));
  //
  // useEffect(() => {
  //   //同步界面 token 到 localStorage
  //   localStorage.setItem('token', token);
  // }, [token])
  //
  // const setTokenHandle = () => {
  //   setToken(inputValue);
  // }
  //
  // //重复逻辑代码！！！
  // const [avatarUrl, setAvatarUrl] = useState('www.123.com');
  //
  // useEffect(() => {
  //   //同步界面 avatarUrl 到 localStorage
  //   localStorage.setItem('avatarUrl', avatarUrl);
  // }, [avatarUrl])
  //
  // const setAvatarUrlHandle = () => {
  //   setAvatarUrl('www.baidu.com');
  // }

  return (
      <div>
        <h2>Hello World</h2>
        <input type="text" value={inputValue} onChange={e => setInputValue(e.target.value)}/>
        <button onClick={() => setToken(inputValue)}>设置token</button>
        <h3>TOKEN: {token}</h3>
        <button onClick={() => setAvatarUrl('www.lisense.com')}>设置新头像</button>
        <h3>头像地址: {avatarUrl}</h3>
      </div>
  );
});

export default App;